<template>
  <div>
    <el-form :model="dataForm" ref="dataForm" label-width="100px" size="small" :rules="rules">
      <el-form-item label="已选管理员:" prop="idList">
        <el-select v-model="dataForm.idList" placeholder="" multiple>
          <el-option v-for="item in dataForm.userList" :key="item.userId" :label="toLabel(item)" :value="item.userId">
            <span style="margin-right: 10px">{{ item.realName }}</span>
            <span>{{ item.organizationName }} / {{ item.roleName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原因备注:" prop="remark">
        <el-input v-model="dataForm.remark" type="textarea" placeholder="请输入原因备注" :rows="4" maxlength="300" show-word-limit clearable></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 10px" label-width="130px">
        <el-button type="" size="small" @click="close">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          <fa-icon class="fa-check" />保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { CONSTANT_OBJ } from '@/utils/constant'
import { common } from '@/utils/common'
import api from '../api'
import { mapState } from 'vuex'
export default {
  props: { editData: Object, changeType: String },
  data () {
    return {
      dataForm: {
        userList: [],
        userStatus: '',
        remark: ''
      },
      principal: [],
      parentOrganizationProps: {
        checkStrictly: true,
        emitPath: false,
        value: 'organizationId',
        label: 'organizationName',
        children: 'childOrganizations'
      },
      rules: {
        idList: [{ required: true, message: '请选择管理员', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入原因备注', trigger: 'blur' }]
      }
    }
  },
  mounted () {
    common.listAssign(this.dataForm, this.editData)
  },
  methods: {
    // 转换label
    toLabel (user) {
      let label = user.realName + '\xa0\xa0' + (user.organizationName || '') + '/' + (user.roleName || '')
      return label
    },
    /**
     * 提交
     */
    submit () {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const dataForm = { ...this.dataForm }
          delete dataForm.userList
          console.log(this.changeType, '改变类型')
          if (this.changeType === 'FROZEN') {
            this.frozeNowUserEvent(dataForm)
          } else if (this.changeType === 'UNFROZEN') {
            this.unFrozeNowUserEvent(dataForm)
          } else if (this.changeType === 'BATCHFROZEN') {
            dataForm.userStatus = 'FROZEN'
            this.changeStatus(dataForm)
          } else {
            this.changeStatus(dataForm)
          }
        }
      })
    },
    // 更新状态
    changeStatus (dataForm) {
      api.postUpdateUserStatus(dataForm).then(res => {
        const { responseCode, responseMsg } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.$message({
            message: `${responseMsg}`,
            type: 'success'
          })
          this.$emit('uppdateUser', 'changeStatus')
        }
      })
    },
    // 冻结用户
    frozeNowUserEvent (dataForm) {
      console.log(dataForm, '用户数据')
      api.frozeNowUser(dataForm.idList[0]).then(res => {
        const { responseCode, responseMsg } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.$message({
            message: `${responseMsg}`,
            type: 'success'
          })
          this.$emit('uppdateUser', 'changeStatus')
        }
      })
    },
    // 解冻用户
    unFrozeNowUserEvent (dataForm) {
      api.unFrozeNowUser(dataForm.idList[0]).then(res => {
        const { responseCode, responseMsg } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.$message({
            message: `${responseMsg}`,
            type: 'success'
          })
          this.$emit('uppdateUser', 'changeStatus')
        }
      })
    },
    close () {
      this.$emit('close')
    }
  },
  computed: {
    ...mapState({
      dicts: state => state.common.dicts
    })
  }
}
</script>
